<template>
	<view>
		<view class='tab-bar-container' :style="{'height': isIphoneX ? '80px': '45px' }">
			<!-- 普通用户 -->
			<block v-if="Status==1">
				<navigator class="navigator" :class="{'active': index == navActive}" v-for="(item, index) in navs"
					:key="item.url" open-type="switchTab" :url="item.url" hover-class="none">
					<view class="tabImage">
						<image class="tabbarIcon" mode="aspectFill" :src="item.selectedIconPath"
							v-if="index == navActive"></image>
						<image class="tabbarIcon" mode="aspectFill" :src="item.iconPath" v-else></image>
					</view>
					<view class="text">{{item.text}}</view>
				</navigator>
			</block>


			<!-- 扫码员 -->
			<block v-else>
				<navigator class="navigator" :class="{'active': index == navActive}" v-for="(item, index) in navs2"
					:key="item.url" open-type="switchTab" :url="item.url" hover-class="none">
					<view class="tabImage">
						<image class="tabbarIcon" mode="aspectFill" :src="item.selectedIconPath"
							v-if="index == navActive"></image>
						<image class="tabbarIcon" mode="aspectFill" :src="item.iconPath" v-else></image>
					</view>
					<view class="text">{{item.text}}</view>
				</navigator>
			</block>


		</view>
	</view>


</template>

// let App = getApp();
// export default {
// name: "tabbar",
// data() {
// return {
// props: {
// // 当前导航高亮
// navActive: {
// // 类型
// type: Number,
// // 默认值
// value: 0
// }
// },
// mounted() {
// console.log(this.isIphoneX, "88");
// console.log(this.Status, "9999")
// },
// methods: {

// },
// }




<script lang='ts'>
	import {
		Component,
		Vue,
		Prop,
		Watch,
		Emit,
		Ref,
	} from 'vue-property-decorator';
	const mdCode = require('../utils/md5.js');
	const desCode = require('../utils/aesUtil.js');
	const api_js = require("../utils/api.js");
	var app = getApp();

	// 一定要加 @Component 装饰器，否则小程序生命周期会报错失效
	@Component({
		name: 'tabber',
	})
	export default class App extends Vue {
		// 初始化数据
		// 公共public，私有private与受保护protected的修饰符
		// 一般来说，在TypeScript里，成员都默认为public。
		currentIndexNav: number = 0;
		navs: any = [{
				text: '首页(ts)',
				url: '../index/index',
				"iconPath": "/static/images/link-icon1.png",
				"selectedIconPath": "/static/images/link-icon1-hover.png"
			},
			{
				text: '我的(ts)',
				url: '../my/index',
				"iconPath": "/static/images/link-icon2.png",
				"selectedIconPath": "/static/images/link-icon2-hover.png"
			},
		];

		navs2s: any = [{
				text: '首页(ts)扫码',
				url: '../scanPeople/index',
				"iconPath": "/static/images/link-icon1.png",
				"selectedIconPath": "/static/images/link-icon1-hover.png"
			},
			{
				text: '我的(ts)扫码',
				url: '../my/index',
				"iconPath": "/static/images/link-icon2.png",
				"selectedIconPath": "/static/images/link-icon2-hover.png"
			},
		];


		isIphoneX_: boolean = false;
		// // 身份 1:参会人员 2:扫码人员
		Status: number = 1;
		globalData: any = {};



		// 设置标题
		@Prop({
			default: 0,
			// 注：属性的类型后面需要加上undefined 类型；或者在属性名后面加上!，表示非null 和 非undefined的断言，否则编译器会给出错误提示；
		}) navActive!: Number


		onload() {
			this.globalData = app.globalData;
			this.isIphoneX_ = this.globalData.isIphoneX
			this.Status = this.globalData.Status
		}


	}
</script>





<style lang="scss" scoped>
	.tab-bar-container {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999;
		width: 100%;
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.12);
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 0 5rpx;
		padding-top: 8rpx;
		box-sizing: border-box;
		background-color: #fff;
		// background-color: red;

		.navigator {
			// height: 100%;
			width: 50%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.tabImage {
				font-size: 0;

				image {
					width: 22px;
					height: 22px;
				}
			}

			.text {
				font-size: 24rpx;
				color: #333;
			}

			&.active {
				.text {
					color: #9c528a;
				}
			}
		}
	}
</style>
